<template>
	<canvas  canvas-id="leuKCyVzuRMelCnCxpMttxrNhxoROeIG" id="leuKCyVzuRMelCnCxpMttxrNhxoROeIG" class="charts"
		@touchend="tap" />
</template>

<script>
	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
	var uChartsInstance = {};
	export default {
		props:{
			echartsObj:{
				type:Object,
				default(){
					return {}
				},
				required:false
			},
			
			color:{
				type:String,
				default(){
					return '#1890FF'
				},
				required:false
			},
			
			title:{
				type:String,
				default(){
					return '默认'
				},
				required:false
			}
		},

		data() {
			return {
				cWidth: 0, 
				cHeight: 0,
			};
		},

		watch: {
			echartsObj: {
				handler(newVal, oldVal) {
					console.log('监听到比那花了');
					this.getInit()
				},
				deep: true,
			}
		},

		onReady() {
			this.getInit()
		},

		methods: {
			
			getInit(){
				let view = uni.createSelectorQuery().in(this).select("#leuKCyVzuRMelCnCxpMttxrNhxoROeIG");
				view
					.fields({
							size: true,
							scrollOffset: true,
						},
						(data) => {
							
							console.log("得到节点信息" + JSON.stringify(data));
							console.log("节点的宽为", data);
							data = data || {}
							this.cWidth = data.width * 1
							this.cHeight = data.height * 1
				
							this.getServerData();
						}
					)
					.exec();
			},
			
			
			getServerData() {
				console.log(this.echartsObj , '-------------------------');
				//模拟从服务器获取数据时的延时
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: this.echartsObj.title,
					series: [{
						name: this.title,
						data: this.echartsObj.array,
					}, ]
				};
				this.drawCharts('leuKCyVzuRMelCnCxpMttxrNhxoROeIG', res);

			},

			drawCharts(id, data) {
				const ctx = uni.createCanvasContext(id, this);
				uChartsInstance[id] = new uCharts({
					type: "line",
					context: ctx,
					canvas2d:true,
					width: this.cWidth,
					height: this.cHeight,
					categories: data.categories,
					series: data.series,
					animation: false,
					background: "#FFFFFF",
					color: [this.color],
					enableScroll: false,
					padding: [10, 0, 10, 0],
					// legend: {},
					xAxis: {
						disableGrid: true,
						boundaryGap: 'center',
						dashLength: 2,
					},
					yAxis: {
						disabled: true,
						gridType: 'dash'
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow"
						}
					}
				});
			},

			tap(e) {
				uChartsInstance[e.target.id].touchLegend(e);
				uChartsInstance[e.target.id].showToolTip(e);
			}
		}
	};
</script>

<style scoped>
	.charts {
		width: 100%;
		height: 100%;
	}
</style>